<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>条件渲染</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

    <script type="text/babel">
    
    // 三目运算符 ? :
    // render() {
    //   const isLoggedIn = this.state.isLoggedIn;
    //   return (
    //     <div>
    //       The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    //     </div>
    //   );
    // }

    // render() {
    //   const isLoggedIn = this.state.isLoggedIn;
    //   return (
    //     <div>
    //       {isLoggedIn
    //         ? <LogoutButton onClick={this.handleLogoutClick} />
    //         : <LoginButton onClick={this.handleLoginClick} />
    //       }
    //     </div>
    //   );
    // }

    function WarningBanner (props) {
      if (!props.warn) {
        return null;
      }

      return (
        <div className="warning">
          Warning!
        </div>
      )
    }

    class Page extends React.Component {
      constructor (props) {
        super(props);
        this.state = { showWarning: true };
        this.handleToggleClick = this.handleToggleClick.bind(this);
      }

      handleToggleClick () {
        this.setState ( state => ({
          showWarning: !state.showWarning
        }))
      }

      render () {
        return (
          <div>
            <WarningBanner warn={this.state.showWarning} />
            <button onClick={this.handleToggleClick}>{this.state.showWarning ? 'Hide' : 'Show'}</button>
          </div>
        )
      }
    }

    ReactDOM.render(
      <Page />,
      document.getElementById('root')
    )
		</script>
	</body>
</html>
